<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <div class="question-header">
            <!-- <h2>抢答题 {{ currentIndex + 1 }}</h2> -->
            <i class="el-icon-time" @click="startTimer"></i>
            <div class="timer">剩余时间: {{ minutes }}:{{ seconds }}</div>
          </div>

          <div class="question-content">
            <h3>{{ currentQuestion.content }}</h3>
          </div>

          <div class="options">
            <p>选项：</p>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="option in currentQuestion.options"
                :key="option.value"
                :label="option.value"
              >
                <span>{{ option.value }}.</span><span>{{ option.label }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>

          <div v-if="showAnswer" class="answer-content">
            <p>正确答案：{{ currentQuestion.correct.join(", ") }}</p>
            <!-- <p v-if="isCorrect">恭喜你，答对了！</p>
            <p v-else>很遗憾，答错了！</p> -->
          </div>

          <div class="action-buttons">
            <el-button
              type="primary"
              @click="submitAnswer"
              v-if="!showAnswer"
              size="large"
            >
              确定
            </el-button>
            <el-button
              type="primary"
              @click="nextQuestion"
              v-if="showAnswer && currentIndex < quList.length - 1"
              size="large"
            >
              下一题
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="btn">
      <el-button @click="() => this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <!-- <el-button @click="()=>this.$router.push({name:'ListQuick'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "ResponderState",

  data() {
    return {
      currentIndex: 0,
      quList: [
        {
          id: 1,
          content: "1、社区警务工作三大任务是什么？",
          options: [
            { value: "A", label: "规定任务" },
            { value: "B", label: "指令任务" },
            { value: "C", label: "推送任务" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 2,
          content: "2、社区民警的主要职责是什么？",
          options: [
            { value: "A", label: "管理实有人口" },
            { value: "B", label: "掌握社情民意" },
            { value: "C", label: "组织安全防范" },
            { value: "D", label: "维护社区秩序" },
          ],
          correct: ["A", "B", "C", "D"],
        },
        {
          id: 3,
          content: '3、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 4,
          content: '4、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 5,
          content: '5、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 6,
          content: '6、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 7,
          content: '7、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 8,
          content: '8、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 9,
          content: '9、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
        {
          id: 10,
          content: '10、派出所"两队一室"分别指什么？',
          options: [
            { value: "A", label: "社区警务队" },
            { value: "B", label: "案件办理队" },
            { value: "C", label: "综合指挥室" },
          ],
          correct: ["A", "B", "C"],
        },
      ],
      currentQuestion: {},
      showAnswer: false,
      checkList: [], // 多选答案
      isCorrect: false, // 是否答对
      timer: null,
      timeLeft: 60, // 60秒答题时间
      minutes: "01",
      seconds: "00",
    };
  },

  created() {
    this.loadQuestion();
  },

  methods: {
    loadQuestion() {
      this.currentQuestion = this.quList[this.currentIndex];
      this.showAnswer = false;
      this.timeLeft = 60;
      // this.startTimer()
    },

    startTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }

      this.timer = setInterval(() => {
        this.timeLeft--;
        this.minutes = Math.floor(this.timeLeft / 60)
          .toString()
          .padStart(2, "0");
        this.seconds = (this.timeLeft % 60).toString().padStart(2, "0");

        if (this.timeLeft <= 0) {
          this.$message.warning("答题时间已到!");
          this.showAnswer = true;
          clearInterval(this.timer);
        }
      }, 1000);
    },

    submitAnswer() {
      this.showAnswer = true;
      this.isCorrect =
        this.checkList.sort().join("") ===
        this.currentQuestion.correct.sort().join("");
      if (this.isCorrect) {
        this.$message({
          message: "回答正确！",
          type: "success",
          center: true,
        });
      } else {
        this.$message({
          message: "很遗憾，回答错误！",
          type: "error",
          center: true,
        });
      }
      clearInterval(this.timer);
    },

    nextQuestion() {
      this.minutes = "01";
      this.seconds = "00";
      this.currentIndex++;
      this.loadQuestion();
      this.checkList = []; // 修复下一题后选项还被选择的情况
      this.isCorrect = false; // 修复下一题后正确错误判断还存在的情况
    },
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
}

.el-row {
  margin: 80px 0;
}

.question-header {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-bottom: 30px;

  color: #f56c6c;
  font-size: 25px;

  h2 {
    margin: 0;
    color: #303133;
  }

  .timer {
    margin-left: 10px;
    font-size: 24px;
    color: #f56c6c;
    font-weight: bold;
  }
}

.question-content {
  margin-bottom: 30px;

  h3 {
    font-size: 30px;
    color: #303133;
    margin-bottom: 20px;
    line-height: 1.5;
  }
}

.options {
  margin-top: 25px;
  
  p {
    margin-bottom: 20px;
    font-weight: bold;
    color: #606266;
    font-size: 32px;
  }

  span {
    font-size: 26px;
  }

  .el-checkbox-group {
    font-size: 36px;
  }

  .el-checkbox {
    display: block;
    margin-bottom: 20px;
    padding: 15px 20px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    transition: all 0.3s;
    font-size: 32px;
    margin-right: 30px;
    &:hover {
      background-color: #f5f7fa;
    }

    &.is-checked {
      border-color: #409eff;
      background-color: #ecf5ff;
    }
  }
}

.answer-content {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.action-buttons {
  text-align: center;
  margin-top: 30px;

  .el-button {
    padding: 15px 35px;
    font-size: 16px;
  }
}

.btn {
  width: 98%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
}
</style>